<template>
    <div class="xzcs-pc-wdindex" @click="isAsk(false, false)">
        <div class="label_search">
            <div class="label">汇集众多财税专家及财税专业老师，1V1在线解答</div>
            <div class="search">
                <el-input v-model="searchInput" class="search-input" maxlength="60" placeholder="搜答案"
                    @keyup.native.enter="goSearch()"></el-input>
                <el-button class="but" type="primary" @click="goSearch()">
                    搜答案
                </el-button>
            </div>
        </div>
        <div class="fast_ask">
            <fastAsk ref="ask" :show="false" :animationShow="false" @submitAsk="submitAsk"></fastAsk>
        </div>

        <div class="main2">
            <!-- 精选问题 -->
            <div class="jxwt">
                <div class="tabs-tips">
                    <div class="tabs">
                        <div class="tab" :class="{ active: tabsIndex == 0 }" @click="getList(0)">
                            最新问题
                        </div>
                        <div class="tab" :class="{ active: tabsIndex == 1 }" @click="getList(1)">
                            推荐列表
                        </div>
                        <div class="tab" :class="{ active: tabsIndex == 2 }" @click="getList(2)">
                            专家列表
                        </div>
                        <div class="tab" :class="{ active: tabsIndex == 3 }" @click="getList(3)">
                            等你来答
                        </div>
                    </div>
                    <el-popover placement="bottom" width="150" trigger="hover">
                        <div class="xzcs-right-fixed-app-code">
                            <img src="~/assets/images/index/app_code.png" alt="" />
                            <div class="zxkf-text">扫一扫,下载APP</div>
                        </div>

                        <div slot="reference" class="tips_hover">
                            <i class="el-icon-mobile-phone"></i>
                            使用APP提问，老师回复第一时间提醒
                        </div>
                    </el-popover>
                </div>
                <div class="jxwt-list">
                    <template v-if="tabsIndex == 0 || tabsIndex == 1">
                        <div v-for="(item, index) in jxwtList" :key="index">
                            <div class="jxwt-item">
                                <div class="wd">
                                    <!-- <img
                                    src="~/assets/images/csjh/index/wen.png"
                                    alt=""
                                /> -->
                                    <nuxt-link :to="`/cswd/${item.id}.html`" target="_blank" class="item-title">
                                        {{
                                            item.subtitle
                                                ? item.subtitle
                                                : item.title
                                        }}
                                    </nuxt-link>
                                </div>
                                <div class="wd wd2">
                                    <!-- <img
                                    src="~/assets/images/csjh/index/da.png"
                                    alt=""
                                /> -->
                                    <div class="text">
                                        {{ showMessage(item.first_answer) }}
                                    </div>
                                </div>
                                <div v-if="item.keyword" class="tags">
                                    <div v-for="(val, idx) in item.keyword.split(
                                        ','
                                    )" :key="idx" class="wt-tags-item">
                                        {{ val }}
                                    </div>
                                </div>
                                <div class="time">
                                    <i class="el-icon-time" style="padding-right: 4px"></i>
                                    {{ item.add_time_text.substring(0, 10) }}
                                    <span style="padding-left: 4px">{{ item.nickname }}解答</span>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-if="tabsIndex == 2">
                        <!-- 专家申请 -->
                        <div class="zjsq">
                            <img class="bj" src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/cswd-zjwd-sqbj.jpg"
                                alt="" />
                        </div>
                        <div v-for="(item, index) in jxwtList" :key="index" class="zj-item">
                            <nuxt-link :to="`/cswd/user/${item.user_id}`">
                                <div class="avatar">
                                    <img :src="item.userinfo.avatar" alt="" />
                                    <div :style="{
                                        background: get_is_online_color(
                                            item.is_online
                                        ),
                                    }">
                                        ·&nbsp;{{
                                            get_is_online_text(item.is_online)
                                        }}
                                    </div>
                                </div>
                            </nuxt-link>

                            <div class="info">
                                <nuxt-link :to="`/cswd/user/${item.user_id}`" target="_blank">
                                    <div class="name">
                                        <span>
                                            {{ item.userinfo.nickname }} </span>&nbsp;&nbsp;
                                        <img src="~/assets/images/csjh/authentication.png" alt="" />
                                        &nbsp;&nbsp;{{ item.major_types }}
                                    </div>
                                </nuxt-link>
                                <div class="tags">
                                    <template v-if="item.userinfo.major_direction">
                                        <div v-for="tag in item.userinfo.major_direction.split(
                                            ','
                                        )" :key="tag" class="tag">
                                            {{ tag }}
                                        </div>
                                    </template>
                                </div>
                                <div class="introduce">
                                    {{ item.userinfo.bio }}
                                </div>
                                <div class="money">全站通会员专享</div>
                            </div>
                            <div>
                                <img v-if="item.is_follow == 1"
                                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/followedBy.png"
                                    class="button2" alt="">
                                <div class="button" @click="goMajor(item)">问专家</div>
                            </div>
                        </div>
                    </template>
                    <template v-if="tabsIndex == 3">
                        <div v-for="(item, index) in jxwtList" :key="index" class="wd-item">
                            <div class="title-but">
                                <div class="title">
                                    {{ item.title }}
                                </div>
                                <div v-if="
                                    userInfo &&
                                    item.status == 1 &&
                                    !item.ans_uid
                                " class="but3" @click="goDetail(item)">
                                    去回答
                                </div>
                                <div v-else-if="
                                    userInfo &&
                                    item.status == 1 &&
                                    item.ans_uid &&
                                    item.ans_uid == userInfo.id
                                " class="but" @click="goDetail(item)">
                                    你的问题
                                </div>
                                <div v-else-if="item.status == 2" class="but2" @click="goDetail(item)">
                                    回答中
                                </div>
                            </div>
                            <div class="name-time">
                                <div class="nickname">
                                    {{ item.nickname }}
                                </div>
                                <div>{{ item.add_time_text }}</div>
                            </div>
                        </div>
                        <div v-if="jxwtList.length == 0" class="no-problemList3">
                            <!-- <el-result
                                v-if="userInfo && userInfo.is_major == 0"
                                title="扫码前往APP成为专业人士"
                                subTitle=""
                            >
                                <template slot="icon">
                                    <el-image
                                        style="width: 300px; height: 300px"
                                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/appDownload/%E5%AE%89%E5%8D%93%EF%BC%88%E5%BA%94%E7%94%A8%E5%AE%9D%EF%BC%89%E4%B8%8B%E8%BD%BD%E4%BA%8C%E7%BB%B4%E7%A0%81.png"
                                    ></el-image>
                                </template>
</el-result> -->
                            <div class="cw-zyrs" v-if="userInfo && userInfo.is_major == 0">
                                <img v-for="url in urls" :key="url" class="lazy-img" :src="url" />
                            </div>
                            <el-empty v-if="!userInfo || userInfo.is_major == 1" description="暂无提问"></el-empty>
                        </div>
                    </template>
                </div>
            </div>
            <!-- 精选问题 ned -->

            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="20"
                    :current-page.sync="page" @current-change="changePage">
                </el-pagination>
            </div>
        </div>

        <!-- 获取到优惠券弹窗 -->
        <div v-if="CouponShow" class="big-dialog">
            <img v-if="CouponGetType == 1" style="cursor: auto; width: 489px"
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/Dialog/new-user.png" alt="领取奖励" />
            <div v-if="CouponGetType == 1" class="new-user-text">
                {{ getAdminCoupon }}
            </div>
            <img v-if="CouponGetType == 2" style="cursor: auto; width: 531px"
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/Dialog/CouponGetType2.png" alt="领取奖励" />
            <div v-if="CouponGetType == 2" class="new-user-text2">
                {{ getAdminCoupon }}
            </div>
            <div class="smalldjck" @click.stop="
                CouponShow = false;
            go('/user/mycoupon', '');
            "></div>

            <i class="el-icon-circle-close nice-user-close" :style="{
                top:
                    CouponGetType == 1
                        ? 'calc(50% + 350px)'
                        : 'calc(50% + 330px)',
            }" @click="CouponShow = false"></i>
        </div>
        <div v-if="moenyShow" class="big-dialog">
            <img v-if="showLeafType == 1" class="big-dialog-img"
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/Dialog/nice-user.png" alt="领取奖励" />
            <img v-if="showLeafType == 2" class="big-dialog-img"
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/Dialog/very-nice-user.png" alt="领取奖励" />
            <i class="el-icon-circle-close nice-user-close" :style="{
                top:
                    showLeafType == 1
                        ? 'calc(50% + 250px)'
                        : 'calc(50% + 300px)',
            }" @click="moenyShow = false"></i>
            <div v-if="showLeafType == 1" class="nice-user-go" @click.stop="
                moenyShow = false;
            go('/user/mybamboo', '');
            "></div>
            <div v-if="showLeafType == 2" class="nice-user-go2" @click.stop="
                moenyShow = false;
            go('/user/mybamboo', '');
            "></div>
        </div>

        <div v-if="UserActivity30Show" class="sb-showHuoDongModel">
            <div>
                <img :src="UserActivity30Obj.pic" alt="" @click="
                    go(UserActivity30Obj.go_url, {});
                UserActivity30Obj = null;
                " />
                <i class="el-icon-circle-close" @click.stop="UserActivity30Show = null"></i>
            </div>
        </div>

        <!-- 浮动弹窗 -->
        <no-ssr>
            <!-- <dynamicPopUps></dynamicPopUps> -->
        </no-ssr>
    </div>
</template>

<script>
import {
    major_select,
    getLaizhanList,
    get_quiznum,
    getJhmjListIndex,
    getCateList,
    getJhmjList,
    major_list,
} from "@/assets/api/csjhApi";

import { goTopSmooth } from "@/assets/utils/utils";

import { getpcslideshow, getanalysedata } from "@/assets/api/indexApi";

import { mapState, mapActions, mapMutations } from "vuex";

import myMarqueeLeft from "@/components/csjh/myMarqueeLeft.vue";

import { cswd } from "@/assets/json/introduce.json";
import mixinsUser from "~/mixins/cswdUser";
import dynamicPopUps from "@/components/index/dynamicPopUps.vue";
import { getCouponList } from "@/assets/api/userCenterApi";

import fastAsk from "@/components/csjh/fastAsk.vue";
export default {
    components: {
        myMarqueeLeft,
        dynamicPopUps,
        fastAsk,
    },
    async asyncData({ params, query }) {
        let data = {
            majorList: [],
            jxwtList: [],
            lunbo: [],
            total: 0,
            page: 1,
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/cswd/",
                images: [""],
                title: "小竹财税问答-【小竹财税平台】",
                description:
                    "小竹财税问答栏目汇集众多税专家及财税专业导师，他们在财税领域有着丰富的实践经验和深厚的理论功底，能够及时准确的为广大财税从业者和学习者提供专业答疑服务。",
                pubDate: "",
                upDate: "",
            },
            cateList: [
                {
                    name: "会计:",
                    list: [],
                },
                {
                    name: "税法:",
                    list: [],
                },
                {
                    name: "综合:",
                    list: [],
                },
            ],
        };

        if (query.page) data.page = parseInt(query.page);
        data.jsonld["@id"] += data.page;

        // const res1 = await major_select({});
        // if (res1.code == 1) {
        //     data.majorList = res1.data;
        // }

        const res2 = await getJhmjList({
            limit: 20,
            page: data.page,
            sort: 2,
        });
        if (res2.code == 1) {
            data.jxwtList = res2.data;
            if (res2.data.length > 0) {
                data.total = res2.data[0].all_count;
                data.jsonld.pubDate = data.jsonld.upDate =
                    res2.data[0].add_time_text;
            }
        }
        // const res3 = await getpcslideshow({
        //     type: 10,
        // });
        // if (res3.code == 1) {
        //     data.lunbo = res3.data;
        // }

        // const res1 = await getCateList({});
        // if (res1.code == 1) {
        //     data.cateList[0].list = res1.data["1"];
        //     data.cateList[1].list = res1.data["2"];
        //     data.cateList[2].list = res1.data["3"];
        // }

        return data;
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: "小竹财税问答-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税问答,财税问答",
                },
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税问答栏目汇集众多税专家及财税专业导师，他们在财税领域有着丰富的实践经验和深厚的理论功底，能够及时准确的为广大财税从业者和学习者提供专业答疑服务。",
                },
            ],
        };
    },
    mixins: [mixinsUser],
    data() {
        return {
            searchInput: "",

            // lunbo: [],
            // majorList: [],
            dnlzList: [],
            // jxwtList: [],
            quiznum: {
                history_quiznum: 0,
                now_quiznum: 0,
            },

            introduceText: cswd,

            urls: [
                "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/zyrs_1_01.jpg?t=1",
                "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/zyrs_1_02.jpg",
                "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/zyrs_1_03.jpg",
                "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/zyrs_1_05.jpg",
            ],

            tabsIndex: 0,

            showMessage: function (first_answer) {
                if (first_answer && first_answer.length > 0) {
                    let messages = "";
                    for (let item of first_answer) {
                        let msg = JSON.parse(item.message);

                        if (msg.extendedData.type == 111)
                            messages = messages + "[表情] ";
                        else if (msg.extendedData.type == 11)
                            messages = messages + "[图片] ";
                        else
                            messages =
                                messages +
                                JSON.parse(item.message).message +
                                " ";
                    }
                    return messages;
                } else {
                    return "";
                }
            },

            get_is_online_color: function (is_online) {
                if (is_online == 0) return "#c2c2c2";
                else if (is_online == 1) return "#58c256";
                else if (is_online == 2) return "#ff6161";
            },
            get_is_online_text: function (is_online) {
                if (is_online == 0) return "离线";
                else if (is_online == 1) return "在线";
                else if (is_online == 2) return "忙碌";
            },

            couponList: [],
        };
    },
    created() { },
    mounted() {
        this.setmenuIndex("1");
        this.init();
        this.getCouponList();

        this.$nextTick(() => {
            goTopSmooth();
        });
        getanalysedata({
            m_id: 4,
            type: 1,
            describe: "小竹问答",
            code: "PC1",
        });
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        ...mapState("cswd", {
            // lunbo: (state) => state.lunbo,
            // majorList: (state) => state.majorList,
            // jxwtList: (state) => state.jxwtList,
        }),
    },
    methods: {
        ...mapActions("common", ["getUserInfo2"]),
        ...mapMutations("common", ["setmenuIndex", "set_payVipShow"]),

        // 获取数据
        async getList(index, page = 1) {
            this.jxwtList = [];
            this.tabsIndex = index;
            this.page = page;
            let getFun = null;
            let parems = {
                page: this.page,
                limit: 20,
            };
            if (index == 0) {
                getFun = getJhmjList;
                parems.sort = 2;
            }
            if (index == 1) {
                getFun = getJhmjList;
                parems.sort = 1;
            }
            if (index == 2) {
                getFun = major_list;
            }
            if (index == 3) {
                getFun = getLaizhanList;
                parems.sort = 0;
            }
            if (!getFun) return;
            const res = await getFun(parems);
            if (res.code == 1) {
                if (index == 0 || index == 1 || index == 3) {
                    if (res.data.length > 0) this.total = res.data[0].all_count;
                    else this.total = 0;
                    this.jxwtList = res.data;
                }
                if (index == 2) {
                    this.total = res.data.all_count;
                    this.jxwtList = res.data.data;
                }
            }
        },

        // 快速提问方法组
        isAsk(is, is2) {
            this.$refs.ask.isAsk(is, is2);
        },
        // 提交提问
        submitAsk(params) {
            // 检测是否登录
            if (!localStorage.getItem("token")) {
                this.$message({
                    message: "请登录后操作",
                    type: "warning",
                });
                return;
            }

            // 弹窗提示付小竹叶
        },

        async init() {
            // this.get_slideshow();
            // this.major_select();
            // this.getLaizhanList();
            // this.getJhmjList();
            this.getUserInfo2()
                .then((user) => {
                    if (user) {
                        this.get_quiznum();
                    }
                })
                .catch(() => { });
        },

        // 分页
        changePage(page) {
            this.page = page;
            this.$router.push({
                path: "/cswd?page=" + page,
            });
            this.getJhmjList();
        },

        // 轮播图
        async get_slideshow() {
            const res = await getpcslideshow({
                type: 10,
            });
            if (res.code == 1) {
                this.lunbo = res.data;
            }
        },

        // 精选老师
        async major_select() {
            const res = await major_select({});
            if (res.code == 1) {
                this.majorList = res.data;
            }
        },

        // 等你来战
        async getLaizhanList() {
            const res = await getLaizhanList({
                page: 1,
                sort: 0,
            });
            if (res.code == 1) {
                if (res.data.length > 3) {
                    this.dnlzList = res.data.slice(0, 3);
                } else {
                    this.dnlzList = res.data;
                }
            }
        },

        // 精选问题
        async getJhmjList() {
            const res = await getJhmjListIndex({
                limit: 20,
                page: this.page,
                sort: 0,
            });
            if (res.code == 1) {
                this.jxwtList = res.data;
                if (res.data.length > 0) this.total = res.data[0].all_count;
                goTopSmooth();
            }
        },

        // 统计提问数
        async get_quiznum() {
            const res = await get_quiznum({});
            if (res.code == 1) {
                this.quiznum = res.data;
            }
        },

        go(url) {
            this.$router.push({
                path: url,
            });
        },

        // 点击专家提问
        goMajor(item) {
            if (!this.userInfo) {
                this.$confirm("需要登录后提问", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        window.localStorage.removeItem("token");
                        window.localStorage.removeItem("userInfo");
                        window.location.href =
                            "/login?url=" +
                            window.location.pathname +
                            window.location.search;
                    })
                    .catch(() => { });
                return;
            }
            if (this.userInfo.is_gpt_vip == 0 && this.couponList.length == 0) {
                this.$confirm(
                    " 该功能为会员专享，非会员可查阅精选问题",
                    "提示",
                    {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "开通会员",
                        cancelButtonText: "去查询",
                    }
                )
                    .then(() => {
                        this.set_payVipShow(true);
                    })
                    .catch((action) => {
                        if (action === "cancel") {
                            this.getList(0);
                        }
                    });
                return;
            }
            if (item.is_online == 0) {
                this.$confirm("当前老师不在线，是否继续提问", "确认信息", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "继续提问",
                    cancelButtonText: "取消",
                })
                    .then(() => {

                        this.openInNewTab(`/cswd/ask?id=${item.user_id}`)
                    })
                    .catch((action) => { });
            } else if (item.is_online == 2) {
                this.$confirm("当前老师忙碌中，是否继续提问", "确认信息", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "继续提问",
                    cancelButtonText: "取消",
                })
                    .then(() => {

                        this.openInNewTab(`/cswd/ask?id=${item.user_id}`)
                    })
                    .catch((action) => { });
            } else {

                this.openInNewTab(`/cswd/ask?id=${item.user_id}`)
            }
        },

        openInNewTab(path) {
            window.open(this.$router.resolve({ path: path }).href, '_blank');
        },

        async getCouponList() {
            const res = await getCouponList({
                status: 0,
                is_effective: 1,
            });
            if (res.code == 1) {
                this.couponList = res.data.list;
            }
        },

        goSearch() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            if (!this.searchInput) {
                this.$alert("请输入搜索内容", "提示", {
                    confirmButtonText: "确定",
                });
                return;
            }

            this.searchInput = this.searchInput.trim();
            let searchInput = "";
            if (!this.searchInput) {
                searchInput = this.indexHotSearch[this.menuIndex[0]];
            } else {
                searchInput = this.searchInput;
            }

            this.$router.push({
                path: `/cswd/search?k=${searchInput}`,
            });
            // let url = `https://api.xiaozhucaishui.com/search/xiaozhuwenda?q=${searchInput}`;
            // if (this.userInfo) url += `&deviceid=${this.userInfo.id}`;
            // window.open(url);
        },

        //进详情
        goChatDetail(item) {
            // if (!this.userInfo) {
            //     this.$message({
            //         message: "请登录",
            //         type: "warning",
            //     });
            //     return;
            // }
            // if (item.ans_uid) {
            //     if (item.ans_uid == this.userInfo.id)
            //         this.$router.push({
            //             path: `/chat/${item.id}`,
            //         });
            //     else
            //         this.$message({
            //             message: "不是您的问题",
            //             type: "warning",
            //         });
            //     return;
            // }
            // if (this.userInfo.is_major == 1 || item.uid == this.userInfo.id) {
            //     this.$router.push({
            //         name: "chat",
            //         params: { id: item.id },
            //     });
            // } else {
            //     this.$message({
            //         message:
            //             "您目前不是专业人士，无法回答问题。请前往小竹财税APP申请成为专业人士",
            //         type: "warning",
            //     });
            // }
        },

        goAsk(path = "/chatgpt/xzcsgpt") {
            if (this.userInfo)
                this.$router.push({
                    path: path,
                });
            else
                this.$confirm("需要登录后提问", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
        },

        //进详情
        goDetail(item) {
            if (!this.userInfo) {
                this.$message({
                    message: "请登录",
                    type: "warning",
                });
                return;
            }
            if (item.ans_uid) {
                if (item.ans_uid == this.userInfo.id)
                    this.$router.push({
                        path: `/chat/${item.id}`,
                    });
                else
                    this.$message({
                        message: "不是您的问题",
                        type: "warning",
                    });
                return;
            }

            if (this.userInfo.is_major == 1 || item.uid == this.userInfo.id) {
                this.$router.push({
                    path: `/chat/${item.id}`,
                });
            } else {
                this.$message({
                    message:
                        "您目前不是专业人士，无法回答问题。请前往小竹财税APP申请成为专业人士",
                    type: "warning",
                });
            }
        },
    },
};
</script>

<style lang="scss">
.xzcs-pc-wdindex {
    padding-top: 20px;

    .label_search {
        padding: 24px 20px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 1200px;
        margin: 0 auto;
        background-color: #ffffff;

        .label {
            font-weight: 500;
            font-size: 20px;
            color: #020c17;
        }

        .search {
            display: flex;
            align-items: center;
            border-radius: 40px;
            overflow: hidden;
        }

        .search-input {
            width: 348px;
            height: 32px;
            font-weight: 400;
            font-size: 16px;
            border-radius: 0;
            margin: 0;

            .el-input__inner {
                border-width: 0;
                height: 32px;
                line-height: 32px;
                font-size: 16px;
                background: #f4f4f4;
            }
        }

        .but {
            width: 72px;
            height: 32px;
            line-height: 32rpx;
            background: #1b8dff;
            padding: 0;
            border-radius: 0;
        }
    }

    .fast_ask {
        width: 1200px;
        margin: 0 auto;
    }

    .main2 {
        // background: #f5f6f8;
    }

    .lstj {
        width: 1200px;
        margin: 0 auto;
        padding: 65px 0;

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left {
                font-size: 28px;
                font-weight: 500;
                color: #333333;
                line-height: 37px;

                span {
                    padding-left: 25px;
                    font-size: 14px;
                    color: #666666;
                    line-height: 18px;
                }
            }

            .right {
                font-size: 14px;
                color: #666666;
                line-height: 18px;
                cursor: pointer;
            }
        }
    }

    .lstj-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 40px;
    }

    .lstj-item {
        position: relative;
        height: 249px;
        width: 225px;

        &:hover {
            img {
                top: -20px;
                // transform: scale(1, 1.04);
                height: 176px;
            }

            .info {
                height: 147px;
                opacity: 0.9;
            }

            .text {
                white-space: normal !important;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }

            .but {
                display: block !important;
            }
        }

        img {
            width: 225px;
            height: 163px;
            object-fit: cover;
            transition-property: transform, top, height;
            transition-duration: 1s, 0.7s, 0.7s;
            position: relative;
            top: 0;
        }

        .info {
            overflow: hidden;
            // transition: height 0.4s;
            width: 225px;
            height: 86px;
            background: #f5f6f8;
            box-sizing: border-box;
            padding: 17px 20px;
            position: absolute;
            bottom: 0;
            left: 0;
            opacity: 1;
            transition-property: opacity, height;
            transition-duration: 1s, 0.4s;

            .name {
                font-size: 18px;
                color: #333333;
                line-height: 24px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                span {
                    font-size: 12px;
                    color: #999999;
                    line-height: 21px;
                }
            }

            .text {
                padding-top: 10px;
                font-size: 12px;
                color: #333333;
                line-height: 16px;
                height: 44px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .but {
                // display: none;
                padding-top: 15px;
                text-align: center;
            }

            .el-but {
                border-color: #ffb200;
                background: #ffb200;

                &:hover {
                    background-color: #e7a305;
                    border-color: #e7a305;
                }
            }
        }
    }

    .dnld {
        width: 1200px;
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom: 60px;

        .title {
            padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left {
                font-size: 28px;
                font-weight: 500;
                color: #333333;
                line-height: 37px;

                span {
                    padding-left: 25px;
                    font-size: 14px;
                    color: #666666;
                    line-height: 18px;
                }
            }

            .right {
                font-size: 14px;
                color: #666666;
                line-height: 18px;
            }
        }
    }

    .zjsq {
        width: 1158px;
        height: 150px;
        position: relative;
        display: flex;
        align-items: center;
        margin: 0 auto;

        .bj {
            width: 100%;
            height: 150px;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
    }

    .zj-item {
        border-bottom: 1px solid #e8e8e8;
        padding: 27px 0;
        display: flex;
        align-items: center;
        position: relative;
        width: 1158px;
        margin: 0 auto;

        .avatar {
            position: relative;

            div {
                width: 49px;
                height: 19px;
                line-height: 19px;
                text-align: center;
                font-size: 12px;
                color: #ffffff;
                border-radius: 19px;
                position: absolute;
                right: 8px;
                bottom: 9px;
            }

            img {
                width: 180px;
                height: 180px;
                object-fit: cover;
            }
        }

        .info {
            padding-left: 30px;

            .name {
                line-height: 26px;
                font-size: 14px;
                font-weight: 400;
                color: #999999;
                display: flex;
                align-items: center;

                span {
                    font-size: 20px;
                    font-weight: 500;
                    color: #333333;
                }

                img {
                    height: 18px;
                    width: auto;
                }
            }

            .tags {
                margin: 15px 0;
                margin-bottom: 8px;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                max-height: 32px;
                overflow: hidden;

                .tag {
                    margin-bottom: 7px;
                    padding: 0 6px;
                    height: 25px;
                    background: #f9e9d9;
                    border-radius: 4px;
                    line-height: 25px;
                    text-align: center;
                    font-size: 14px;
                    color: #333333;
                    margin-right: 10px;
                }
            }

            .introduce {
                font-size: 14px;
                color: #9e9e9e;
                white-space: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                /* 可以限制显示的行数，这里为2行 */
                display: -webkit-box;
                -webkit-box-orient: vertical;
                line-height: 24px;
                height: 48px;
            }

            .money {
                font-size: 14px;
                font-weight: 500;
                color: #fa5151;
                padding-top: 20px;
            }
        }

        .button {
            width: 100px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            border-radius: 65px;
            border: 1px solid #333333;
            font-size: 16px;
            color: #333333;
            position: absolute;
            right: 8px;
            top: 36px;
            cursor: pointer;

            &:hover {
                background: #ff8025;
                border-color: #ff8025;
                color: #ffffff;
            }
        }

        .button2 {
            display: block;
            width: auto;
            height: 38px;
            position: absolute;
            right: 120px;
            top: 36px;
        }

        &:hover {
            .name {
                span {
                    color: #ff6f1d;
                    text-decoration: underline;
                }
            }
        }
    }

    .jxwt {
        width: 1200px;
        margin: 0 auto;
        // padding-top: 65px;
        background-color: #ffffff;

        .tabs-tips {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 60px;
            line-height: 60px;
            width: 1158px;
            margin: 0 auto;
            border-bottom: 1px solid #f0f0f0;

            .tabs {
                display: flex;
                align-items: center;

                .tab {
                    font-weight: 500;
                    font-size: 20px;
                    color: #020c17;
                    margin-right: 45px;
                    cursor: pointer;

                    &:hover {
                        opacity: 0.8;
                    }
                }

                .active {
                    color: #1b8dff;
                }
            }

            .tips_hover {
                font-weight: 400;
                font-size: 13px;
                color: #1b8dff;
                cursor: pointer;

                i {
                    font-size: 20px;
                    position: relative;
                    top: 2px;
                }
            }
        }

        .title {
            padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left {
                font-size: 28px;
                font-weight: 500;
                color: #333333;
                line-height: 37px;

                span {
                    padding-left: 25px;
                    font-size: 14px;
                    color: #666666;
                    line-height: 18px;
                }
            }

            .right {
                font-size: 14px;
                color: #666666;
                line-height: 18px;
            }
        }
    }

    .jxwt-list {
        padding: 29px 0;
    }

    .jxwt-item {
        margin: 0 auto 27px;
        width: 1158px;
        background: #ffffff;
        border-radius: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #f0f0f0;
        padding: 0 0 27px;

        &:hover {
            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.03);
        }

        .time {
            text-align: right;
            height: 0;
            position: relative;
            bottom: 19px;
            font-size: 12px;
            color: #999999;
        }

        .tags {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;

            .wt-tags-item {
                display: flex;
                align-items: center;
                justify-content: center;
                // cursor: pointer;
                min-width: 30px;
                padding: 2px 10px;
                height: 26px;
                background-color: #f6f6f6;
                color: #666;
                font-size: 12px;
                border-radius: 75px;
                margin-right: 8px;
                // &:hover {
                //     color: #1772f6;
                //     background-color: #e7f1fe;
                // }
            }
        }

        .wd2 {
            padding-top: 23px;
            min-height: 83px;
        }

        .wd {
            display: flex;
            align-items: flex-start;

            img {
                position: relative;
                top: 2px;
                width: 24px;
                height: 24px;
                margin-right: 12px;
            }

            .item-title {
                font-size: 18px;
                color: #333333;
                line-height: 26px;
                white-space: nowrap;
                overflow: hidden; //溢出显示
                text-overflow: ellipsis; //显示...

                &:hover {
                    color: #1772f6;
                    text-decoration: underline;
                }
            }

            .text {
                font-size: 18px;
                color: #666666;
                line-height: 30px;
                overflow: hidden;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
        }
    }

    .wd-item {
        padding: 0 0 25px 0;
        width: 1158px;
        margin: 0 auto 25px;
        border-bottom: 1px solid #eaeaea;

        .title-but {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
                min-width: 573px;
                overflow: hidden;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                font-size: 18px;
                color: #333333;
                line-height: 32px;
                padding: 0;
                cursor: pointer;

                &:hover {
                    text-decoration: underline;
                    color: #fa6815 !important;
                }
            }

            .but {
                width: 100px;
                min-width: 100px;
                height: 38px;
                background: linear-gradient(90deg, #ff6317 0%, #ff8628 100%);
                border-radius: 65px;
                font-size: 16px;
                color: #ffffff;
                line-height: 38px;
                text-align: center;
                cursor: pointer;

                &:hover {
                    opacity: 0.8;
                }
            }

            .but2 {
                width: 100px;
                min-width: 100px;
                height: 38px;
                background: #f7f7f7;
                border-radius: 65px;
                font-size: 16px;
                color: #777777;
                line-height: 38px;
                text-align: center;
                cursor: pointer;

                &:hover {
                    opacity: 0.8;
                }
            }

            .but3 {
                width: 98px;
                min-width: 98px;
                height: 36px;
                border: 1px solid #333333;
                border-radius: 65px;
                font-size: 16px;
                color: #333333;
                line-height: 34px;
                text-align: center;
                cursor: pointer;

                &:hover {
                    background: linear-gradient(90deg,
                            #ff6317 0%,
                            #ff8628 100%);
                    color: #ffffff;
                    border-color: transparent;
                }
            }
        }

        .name-time {
            display: flex;
            align-items: center;
            margin-top: 20px;

            .nickname {
                width: 165px;
            }

            div {
                font-size: 14px;
                color: #9e9e9e;
            }
        }
    }

    .no-problemList3 {
        text-align: center;
        padding: 0 21px;

        .cw-zyrs {
            .lazy-img {
                display: block;
                width: 100%;
                height: auto;
                margin: 0;
                padding: 0;
            }
        }
    }

    .no-data {
        text-align: center;
        width: 100%;

        .no-data-but {
            background: linear-gradient(90deg, #ff6317 0%, #ff892a 100%);

            &:hover {
                opacity: 0.8;
            }
        }

        .el-empty {
            padding: 0;
        }
    }

    .abstract {
        position: relative;
        margin: 0 auto;
        width: 1200px;
        height: 223px;
        box-sizing: border-box;
        padding: 32px 0 0 54px;

        img {
            display: block;
            width: 1200px;
            height: 223px;
            position: absolute;
            top: 0;
            left: 0;
        }

        div {
            width: 695px;
            font-size: 14px;
            color: #8c9bb0;
            line-height: 28px;
            position: relative;
            z-index: 10;
        }
    }

    .types-title {
        width: 1200px;
        margin: 0 auto;
        font-weight: 500;
        font-size: 28px;
        color: #333333;
        padding: 15px 0;
    }

    .types {
        width: 1200px;
        margin: 0 auto;
        background: #ffffff;
        padding: 25px 0;
        position: relative;
        z-index: 100;

        .type-list {
            display: flex;
            width: auto;
            overflow: hidden;
            position: relative;

            .type-right {
                display: flex;
                flex-wrap: wrap;
            }

            .type-name {
                width: 52px;
                min-width: 52px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                background: #ebf4ff;
                color: #396ca7;
                display: block;
            }

            .type-item {
                white-space: nowrap;
                margin-left: 12px;
                height: 28px;
                line-height: 28px;
                display: block;

                &:hover {
                    color: #0e8ed8;
                }
            }

            .type-more {
                display: block;
                color: #0e8ed8;
                width: 56px;
                text-align: right;
                // background-color: red;
                // background: linear-gradient(
                //     to right,
                //     rgba(255, 255, 255, 0.8) 5%,
                //     white 95%
                // );
                background-color: #ffffff;
                height: 28px;
                line-height: 28px;
                user-select: none;
                position: absolute;
                right: 0;
                top: 0;
            }
        }

        .line {
            height: 1px;
            background-color: #f0f0f0;
            margin: 15px 0;
        }
    }

    .big-dialog {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        background: rgba($color: #000000, $alpha: 0.4);

        .big-dialog-img {
            cursor: auto;
            width: 448px;
        }

        .nice-user-close {
            position: absolute;
            left: calc(50% - 18px);
            font-size: 36px;
            color: #fff;
            cursor: pointer;
        }

        .nice-user-go {
            width: 236px;
            height: 56px;
            position: absolute;
            top: calc(50% + 130px);
            left: calc(50% - 110px);
            cursor: pointer;
        }

        .nice-user-go2 {
            width: 282px;
            height: 61px;
            position: absolute;
            top: calc(50% + 170px);
            left: calc(50% - 140px);
            cursor: pointer;
        }

        img {
            cursor: pointer;
        }

        .big-close {
            text-align: center;
            position: relative;
            left: -114px;
            top: -90px;
            width: 50px;
            height: 20px;
            border-radius: 15px;
            font-size: 14px;
            color: #fff;
            background-color: #000000;
            opacity: 0.7;
        }

        .el-icon-circle-close {
            // position: relative;
            // left: -11px;
            // top: -206px;
            // color: #fff;
            // font-size: 34px;
        }

        .smalldjck {
            width: 294px;
            height: 104px;
            line-height: 55px;
            background: transparent;
            text-align: center;
            font-size: 23px;
            font-weight: 500;
            position: absolute;
            top: calc(50% + 190px);
            cursor: pointer;
        }

        .smalldjck2 {
            width: 236px;
            height: 56px;
            // background: linear-gradient(180deg, #fff249 0%, #ffb917 100%);
            // box-shadow: 0px 4px 14px 0px rgba(199, 55, 51, 0.7);
            border-radius: 25px;
            // font-size: 24px;
            // color: #ff3734;
            // text-align: center;
            // line-height: 50px;
            cursor: pointer;
        }

        .new-user-text {
            color: #ff075a;
            font-weight: 700;
            font-size: 120px;
            position: absolute;
            left: calc(50% - 166px);
            top: calc(50% + 0px);
        }

        .new-user-text2 {
            color: #ff075a;
            font-weight: 700;
            font-size: 120px;
            position: absolute;
            left: calc(50% - 32px);
            top: calc(50% - 22px);
            transform: rotate(-38deg);
        }

        .smalltext {
            position: absolute;
            bottom: calc(50% - 76px);

            .admincoupon {
                text-transform: none;
                background: linear-gradient(90deg, #ff651f 0%, #ff075a 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: 700;
                font-size: 31px;

                span {
                    font-size: 74px;
                }
            }

            .admincoupon2 {
                line-height: 1;
                padding-bottom: 5px;
            }

            div {
                // background: linear-gradient(180deg, #ff6a44 0%, #fe1000 100%);
                // -webkit-background-clip: text;
                // -webkit-text-fill-color: transparent;
                text-align: center;
            }
        }

        .smalltext2 {
            position: absolute;
            top: calc(50% - 165px);

            .admincoupon {
                text-align: center;
                text-transform: none;
                background: linear-gradient(90deg, #ff651f 0%, #ff075a 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: 700;
                font-size: 36px;

                span {
                    font-size: 58px;
                }
            }
        }
    }

    .search-input {
        width: 860px;
    }

    .width133 {
        width: 133px;
    }

    .pagination {
        text-align: center;
        padding: 30px;
    }

    .colorff4545 {
        color: #ff4545;
    }

    .sb-showHuoDongModel {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        background-color: rgba($color: #000000, $alpha: 0.4);

        >div {
            position: relative;
            cursor: pointer;

            i {
                color: #fff;
                font-size: 34px;
                position: absolute;
                bottom: -56px;
                right: 178px;
            }
        }

        img {
            width: 387px;
            height: auto;
        }
    }
}
</style>
